<template>
  <div class="p-2">
    <el-table
      :max-height="tableHeight"
      border
      v-loading="loading"
      :data="tableList"
      :span-method="objectSpanMethod"
      height="400px"
    >
      <el-table-column type="selection" width="55"> </el-table-column>
      <el-table-column type="index" label="序号" width="50" />
      <el-table-column align="center" label="单据编号" width="220">
        <template #default="scope">
          {{ scope.row.codeNo }}
        </template>
      </el-table-column>
      <el-table-column
        align="center"
        label="领料数量"
        prop="deliveryDate"
        width="120"
      >
        <template #default="scope">
          {{ blankAttributeDefault(scope.row.receiveNums) }}
        </template>
      </el-table-column>
      <el-table-column align="center" label="单据状态" width="100">
        <template #default="scope">
          <dict-tag :options="data_status" :value="scope.row.dataStatus" />
        </template>
      </el-table-column>
      <el-table-column
        align="center"
        label="业务日期"
        prop="deliveryDate"
        width="150"
      >
        <template #default="scope">
          {{ blankAttributeDefault(scope.row.businessDate) }}
        </template>
      </el-table-column>
      <el-table-column
        align="center"
        label="生产组织"
        prop="deliveryDate"
        width="150"
      >
        <template #default="scope">
          {{ blankAttributeDefault(scope.row.productionOrganizationName) }}
        </template>
      </el-table-column>
      <el-table-column
        align="center"
        label="生产车间"
        prop="deliveryDate"
        width="150"
      >
        <template #default="scope">
          {{ blankAttributeDefault(scope.row.workshopName) }}
        </template>
      </el-table-column>
      <el-table-column
        align="center"
        label="产品编码"
        prop="deliveryDate"
        width="100"
      >
        <template #default="scope">
          {{ blankAttributeDefault(scope.row.matterFullCode) }}
        </template>
      </el-table-column>
      <el-table-column
        align="center"
        label="产品名称"
        prop="deliveryDate"
        width="150"
      >
        <template #default="scope">
          {{ blankAttributeDefault(scope.row.matterName) }}
        </template>
      </el-table-column>
      <el-table-column
        align="center"
        label="助记码"
        prop="deliveryDate"
        width="150"
      >
        <template #default="scope">
          {{ blankAttributeDefault(scope.row.matterMnemonicCode) }}
        </template>
      </el-table-column>
      <el-table-column
        align="center"
        label="规格型号"
        prop="deliveryDate"
        width="150"
      >
        <template #default="scope">
          {{ blankAttributeDefault(scope.row.matterSpecModel) }}
        </template>
      </el-table-column>
      <el-table-column
        align="center"
        label="批号"
        prop="deliveryDate"
        width="150"
      >
        <template #default="scope">
          {{ blankAttributeDefault(scope.row.lotNumber) }}
        </template>
      </el-table-column>
      <el-table-column align="center" label="滑块数量" width="100">
        <template #default="scope">
          {{ blankAttributeDefault(scope.row.sliderNum) }}
        </template>
      </el-table-column>
      <el-table-column align="center" label="单轨长度(mm)" width="120">
        <template #default="scope">
          {{ blankAttributeDefault(scope.row.monorailLength) }}
        </template>
      </el-table-column>
      <el-table-column align="center" label="滑块总数量" width="150">
        <template #default="scope">
          {{ blankAttributeDefault(scope.row.sliderAllNum) }}
        </template>
      </el-table-column>
      <el-table-column align="center" label="导轨销售总长度(mm)" width="150">
        <template #default="scope">
          {{ blankAttributeDefault(scope.row.monorailAllLength) }}
        </template>
      </el-table-column>
      <el-table-column
        align="center"
        label="库存组织"
        prop="deliveryDate"
        width="150"
      >
        <template #default="scope">
          {{ blankAttributeDefault(scope.row.stockOrganizationName) }}
        </template>
      </el-table-column>
      <el-table-column
        align="center"
        label="仓库"
        prop="deliveryDate"
        width="150"
      >
        <template #default="scope">
          {{ blankAttributeDefault(scope.row.warehouse) }}
        </template>
      </el-table-column>
      <el-table-column
        align="center"
        label="仓位"
        prop="deliveryDate"
        width="150"
      >
        <template #default="scope">
          {{ blankAttributeDefault(scope.row.position) }}
        </template>
      </el-table-column>
      <el-table-column
        align="center"
        label="领料人"
        prop="deliveryDate"
        width="150"
      >
        <template #default="scope">
          {{ blankAttributeDefault(scope.row.receiveUserName) }}
        </template>
      </el-table-column>
      <el-table-column
        align="center"
        label="实际成本"
        prop="deliveryDate"
        width="120"
      >
        <template #default="scope">
          {{ blankAttributeDefault(scope.row.actualCost) }}
        </template>
      </el-table-column>
      <el-table-column
        align="center"
        label="备注"
        prop="deliveryDate"
        width="150"
      >
        <template #default="scope">
          {{ blankAttributeDefault(scope.row.remark) }}
        </template>
      </el-table-column>
    </el-table>

    <pagination
      class="pos-absolute pos-bottom-20px pos-right-20px"
      v-show="total > 0"
      :total="total"
      v-model:page="queryParams.page"
      v-model:limit="queryParams.size"
      @pagination="getList"
    />
  </div>
</template>

<script setup >
import { pageProductionMaterialRequisitionApi } from "@/api/pagesList";
import { blankAttributeDefault } from "@/utils/index";

const { proxy } = getCurrentInstance();
const props = defineProps({
  codeNo: undefined,
});

const tableList = ref([]);
const loading = ref(true);
const showSearch = ref(true);
const single = ref(true);
const multiple = ref(true);
const total = ref(0);
const dateRange = ref(["", ""]);
const { data_status } = toRefs(proxy?.useDict("data_status"));

const queryParams = ref({
  page: 1,
  size: 10,
  taskCodeNo: props.codeNo,
});
/** 获取分页列表 */
const getList = async () => {
  const res = await pageProductionMaterialRequisitionApi(queryParams.value);
  tableList.value = res.data.data;
  total.value = res.data.total;
  loading.value = false;
};
getList();

const objectSpanMethod = ({ row, rowIndex, columnIndex }) => {
  if (
    columnIndex === 0 ||
    columnIndex === 1 ||
    columnIndex === 2 ||
    columnIndex === 3
  ) {
    const codeNo = row.codeNo;
    const preRow = tableList.value[rowIndex - 1];
    const preValue = preRow ? preRow.codeNo : null;
    if (codeNo === preValue) {
      return { rowspan: 0, colspan: 0 }; // 不生成单元格
    } else {
      let rowspan = 1;
      for (let i = rowIndex + 1; i < tableList.value.length; i++) {
        const nextRow = tableList.value[i];
        const nextValue = nextRow.codeNo;
        if (nextValue === codeNo) {
          rowspan++;
        } else {
          break;
        }
      }
      return { rowspan, colspan: 1 };
    }
  }
};
</script>

<style lang="scss" scoped></style>
